<template>
  <div>
    <div class="header">
      <el-button type="primary" :icon="Plus" @click="onAdd"> 添加 </el-button>
    </div>

    <el-table :data="users" stripe>
      <el-table-column prop="id" label="id" />
      <el-table-column prop="name" label="名字" />

      <el-table-column label="操作" align="center" header-align="center">
        <template #default="scope">
          <el-button type="primary" icon="Edit" @click="onEdit(scope.row)">
            编辑
          </el-button>
          <el-button
            type="danger"
            icon="Delete"
            @click="onDelete(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="AddFromVisible"
      :title="dialogTitle"
      :close-on-click-modal="false"
      width="60%"
    >
      <el-form
        ref="pesticideRef"
        class="pesticide-form"
        :model="users"
        :rules="rules"
        label-width="10em"
      >
        <!-- <template v-for="(value, key) in users" :key="key">
          <el-form-item :label="$t(key)" :prop="key">
            <el-input v-model="users[key]" clearable />
          </el-form-item>
        </template> -->
      </el-form>

      <!-- <el-form
        ref="addProductFormRef"
        label-width="8em"
        status-icon
        :rules="rules"
        :model="instructions"
      >
        <template
          v-for="(value, key) in instructions"
          :key="key"
        >
          <el-form-item
            :label="$t(key)"
            :prop="key"
          >
            <el-input
              v-if="key == 'toxicityIdentification'"
              v-model="instructions[key]"
            />
            <el-input
              v-else
              v-model="instructions[key]"
              :rows="3"
              autosize
              type="textarea"
            />
          </el-form-item>
        </template>
      </el-form> -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="AddFromVisible = false">
            {{ $t('Cancel') }}</el-button
          >
          <el-button type="primary" @click="onSubmit">{{
            $t('Confirm')
          }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
/* eslint-disable max-len */
import { Plus } from '@element-plus/icons-vue';
import { ref, reactive } from 'vue';
import { rules } from '@/libs/Rules';
import { FormInstance } from 'element-plus';
import { inject } from 'vue';
import { shios } from '@/api/Shios';
const dialogTitle = ref('添加产品');
const reload = inject<Function>('reload');

const warrantyPeriodNumber = ref(2);
const pesticideRef = ref<FormInstance>();
const { data: users } = await shios.get<Array<User>>('Users');
console.log(users);

const AddFromVisible = ref(false);

/**
 * 提交表单
 * @param {FormInstance} formEl
 */
async function onSubmit() {
  // console.log(JSON.stringify(pesticide));

  reload && reload();
}

/**
 * 添加产品
 */
function onAdd() {}
/**
 *
 * @param {Record<string, any>}row
 */
function onEdit(row: Record<string, any>) {}
/**
 * 删除产品
 * @param {number} id 产品id
 */
async function onDelete(id: number) {
  reload && reload();
}
const year = ['一', '二', '三', '四', '五'];
</script>

<style lang="scss" scoped>
.header {
  padding-bottom: 1rem;
  border-bottom: 1px solid #e6ebf5;
}

.pesticide-form {
  margin: auto;
  display: flex;
  flex-wrap: wrap;

  .el-form-item {
    width: 50%;

    &.textarea {
      width: 100%;
    }
  }

  // grid-template-columns: 1fr 1fr;
}
</style>
